﻿<!DOCTYPE>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>点定里程</title>
        <style type="text/css">
            body{
                margin: 0;
                overflow: hidden;
                background: #fff;
            }
            #map{
                position: relative;
                height: 510px;
                border:1px solid #3473b7;
            }
            #toolbar {
                position: relative;
                padding-top: 5px;
                padding-bottom: 10px;
            }
        </style>
        <link href='./css/bootstrap.min.css' rel='stylesheet' />
        <link href='./css/bootstrap-responsive.min.css' rel='stylesheet' />
        <script src='../libs/SuperMap.Include.js'></script>
        <script type="text/javascript">
            var host = document.location.toString().match(/file:\/\//)?"http://localhost:8090":'http://' + document.location.host;
            var map, layer, routeObj, vectorLayer, drawPoint, pointLayer,  snap01,modifyFeature,
            lineStyle = {
                strokeColor:"red",
                strokeWidth:2,
                pointRadius:3,
                pointerEvents:"visiblePainted",
                fill:false
            },
            pointStyle = {
                fillColor:'#669933',
                fillOpacity:0.8,
                pointRadius:5,
                strokeColor:'#aaee77',
                strokeWidth:3
            },
            url1=host+"/iserver/services/map-changchun/rest/maps/长春市区图",
            url2=host+"/iserver/services/spatialanalyst-changchun/restjsr/spatialanalyst";
            function init(){
                layer = new SuperMap.Layer.TiledDynamicRESTLayer("changchun", url1, { transparent:true, cacheEnabled:true }, { maxResolution:"auto" });
                vectorLayer = new SuperMap.Layer.Vector("RouteLayer");
                pointLayer = new SuperMap.Layer.Vector("pointLayer");

                snap01=new SuperMap.Snap([vectorLayer,pointLayer],20,20,{actived:true});  //设置actived为true的时候，捕捉已激活。


                drawPoint = new SuperMap.Control.DrawFeature(pointLayer, SuperMap.Handler.Point);
                drawPoint.events.on({"featureadded":drawPointCompleted});
                drawPoint.snap=snap01;

                layer.events.on({"layerInitialized":addLayer});

                map = new SuperMap.Map("map", {allOverlays:true, controls:[
                    new SuperMap.Control.LayerSwitcher(),
                    new SuperMap.Control.ScaleLine(),
                    new SuperMap.Control.Zoom(),
                    new SuperMap.Control.Navigation({
                        dragPanOptions:{
                            enableKinetic:true
                        }}), drawPoint]
                });

            }

            function addLayer() {
                map.addLayers([layer, vectorLayer, pointLayer]);
                map.setCenter(new SuperMap.LonLat(4503.6240321526, -3861.911472192499), 1);
            }

            //通过SQL查询路由对象
            function CreateRouteObj() {
                var queryParam, queryBySQLParams, queryBySQLService;
                queryParam = new SuperMap.REST.FilterParameter({
                    name:"RouteDT_road@Changchun",
                    attributeFilter:"RouteID=1690"
                });
                queryBySQLParams = new SuperMap.REST.QueryBySQLParameters({
                    queryParams:[queryParam]
                });
                queryBySQLService = new SuperMap.REST.QueryBySQLService(url1, {
                    eventListeners:{
                        "processCompleted":processCompleted,
                        "processFailed":processFailed
                    }
                });
                queryBySQLService.processAsync(queryBySQLParams);
            }

            //路由对象查询成功，初始化routeObj的值，同时将查询结果绘制在地图上
            function processCompleted(queryEventArgs) {

                routeObj = geo = queryEventArgs.result.recordsets[0].features[0].geometry;
                var feature = new SuperMap.Feature.Vector();
                feature.geometry = geo;
                feature.style = lineStyle;
                vectorLayer.addFeatures(feature);
                alert("查询成功");
            }

            //路由对象查询失败，显示提示信息
            function processFailed() {
                alert("查询失败");
            }

            //激活画点控件，判断routeObj是否为空，如果为空则禁止下一步操作
            function RouteCalculateMeasure() {
                if (!routeObj) {
                    alert("请通过查询获取路由对象！");
                    return;
                }
                drawPoint.activate();
            }
            //绘制点完成触发事件，先将点绘制在地图上，然后以点的geometry和查询结果
            // routeObj为参数初始化"点定里程"的参数类。
            function drawPointCompleted(drawGeometryArgs) {
                var feature = new SuperMap.Feature.Vector();
                var geometry = drawGeometryArgs.feature.geometry
                feature.geometry = geometry;
                feature.style = pointStyle;
                pointLayer.addFeatures(feature);

                //创建“点定里程”参数类。
                var parameters = new SuperMap.REST.RouteCalculateMeasureParameters({
                    "sourceRoute":routeObj,
                    "tolerance":10,
                    "point":geometry,
                    "isIgnoreGap":false
                });

                //创建“点定里程”服务类。
                var routeCalculateMeasureService = new SuperMap.REST.RouteCalculateMeasureService(url2, {
                            eventListeners:{
                                "processCompleted":routeCalculateMeasureCompleted,
                                'processFailed':routeCalculateMeasureFailed
                            }
                        }
                );
                //执行相关操作
                routeCalculateMeasureService.processAsync(parameters);
            }

            //“点定里程”查询完成，提示返回信息
            function routeCalculateMeasureCompleted(e) {
                alert("查询获取的M值为：" + e.result.measure);
            }

            //“点定里程”查询失败，提示服务端返回的信息
            function routeCalculateMeasureFailed(e) {
                alert(e.error.errorMsg);
            }

            //移除图面要素，并使画点控件失效，同时将路由对象置空，去掉提示信息
            function Remove() {
                vectorLayer.removeAllFeatures();
                pointLayer.removeAllFeatures();
                drawPoint.deactivate();
                routeObj = null;
            }
        </script>
    </head>
    <body onload="init()">
        <div id="toolbar">
            <input type="button" class="btn" value="查询路由对象" onclick="CreateRouteObj()" />
            <input type="button" class="btn" value="指定查询点" onclick="RouteCalculateMeasure()" />
            <input type="button" class="btn" value="清除" onclick="Remove()" />
        </div>
        <div id="map"></div>
    </body>
</html>
